<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>jqcp</title>
		<!-- jQuery/jQueryUI (hosted) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
		<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<!--link href="aristo/Aristo.css" rel="stylesheet" type="text/css"/-->
        <style>
			body {
				font-family:	'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
				font-size:		62.5%;
			}

			#switcher {
				float: 			right;
				display: 		inline-block;
			}
        </style>
		<script src="jquery.colorpicker.js"></script>
		<link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
        <script>
           	$( function() {
				$('#switcher').themeswitcher();

                $('#cp1').colorpicker({
					onClose: function(hex, rgba, inst) {

							},
					onSelect: function(hex, rgba, inst) {
								//console.log(hex);
								//console.log(rgba);
								//console.log(inst);
							},
					showOn: 'both',
					showHeader: true,
					showSwatches: true,
					buttonColorize: true,
					altField: '.cp1-alt',
					altProperties: 'background-color,color'
				});

                $('#cp2').colorpicker({
					alpha: true,
					showButtonPanel: true
				});

                var cpb = $('#cp-buttons').colorpicker({
					showOn: '',
					parts: ['bar', 'map']
				});
				$('#cp-button-open').click( function() {
					cpb.colorpicker('open');
				});
				$('#cp-button-close').click( function() {
					cpb.colorpicker('close');
				});
				$('#cp-button-disable').click( function() {
					cpb.colorpicker('disable');
				});
            });
        </script>
    </head>
    <body>
        <div id="switcher"></div>

        Color: <input type="color" id="cp1" value="ff9900"/>
		<div class="cp1-alt" style="border: 1px inset; width: 180px; height: 60px;">
			<div style=" background-color: white; border: 1px solid black; margin: 5px; padding: 5px; font-size: 20px; font-weight: bold;">Text</div>
		</div>

		<hr/>

		Inline:<div id="cp2"></div>

		<hr/>

		Activated by buttons: <input type="color" id="cp-buttons" value="927abc"/>
		<br/><button id="cp-button-open">Open</button>
		<br/><button id="cp-button-close">Close</button>
		<br/><button id="cp-button-disable">Disable</button>
    </body>
</html>
